<template>
  <div class="admin-container">
    <!-- 顶部导航条 -->
    <NavBar />

    <!-- 主体内容，包含侧边栏和主要内容区 -->
    <div class="main-content">
      <Sidebar />
      <div class="admin-content">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import Sidebar from '../components/Sidebar.vue'
import NavBar from '../components/NavBar.vue'
</script>

<style scoped>
/* 整体布局容器 */
.admin-container {
  display: flex;
  flex-direction: column; /* 改为上下布局 */
  height: 100vh; /* 全屏高度 */
}

/* 顶部导航条样式 */
.navbar {
  flex-shrink: 0; /* 顶部内容不收缩 */
  height: 60px; /* 设定导航条高度 */
}

/* 主体内容容器 */
.main-content {
  display: flex;
  flex: 1; /* 占满剩余空间 */
}

/* 侧边栏样式 */
.sidebar {
  flex-shrink: 0;
  width: 240px; /* 固定侧边栏宽度 */
  background-color: #f5f5f5;
}

/* 主内容区域 */
.admin-content {
  flex: 1;
  padding: 20px; /* 内容的内边距 */
  overflow-y: auto; /* 垂直滚动条（如果内容溢出） */
}
</style>